<script setup>
import { onMounted, ref, watch } from "vue";
import { useUserStore } from "@/stores/user/index.js";
import router from "@/router";

const userStore = useUserStore();
const pwd = ref("");
const username = ref("");
const goLogin = async () => {
  if (username.value == "" || pwd.value == "") {
    ElMessage.error("账号或密码不能为空");
  } else {
    let userArr = {
      username: username.value,
      password: pwd.value,
    };
    await userStore.loginUser(userArr);
    //  console.log(localStorage.getItem("userId"))
    if (localStorage.getItem("userId") != null) {
      if (localStorage.getItem("userId") == "root") {
        router.push("/admin");
      } else {
        router.push("/");
      }
    }
  }
};
</script>

<template>
  <div class="login">
    <div class="context">
      <div class="left"></div>
      <div class="right">
        <span class="logo">YTDD</span>
        <span class="title">登入账户 ✨</span>
        <label for="username">用户名</label>
        <el-input
          v-model="username"
          style="width: calc(75vw * 35%)"
          size="large"
          placeholder="请输入你的用户名"
          id="username"
          class="my_input"
        />
        <label for="pwd">密码</label>
        <el-input
          v-model="pwd"
          style="width: calc(75vw * 35%)"
          type="password"
          placeholder="请输入密码"
          show-password
          size="large"
          id="pwd"
          class="my_input"
          @keyup.enter="goLogin"
        />
        <el-button color="#a0adf1" style="color: #fff; height: 45px" @click="goLogin"
          >登录账户</el-button
        >
        <p class="goReg">还有没有用户吗？<a href="/register">注册用户</a></p>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import url("/src/assets/style/login/login.scss");
</style>
<style>
/* ::v-deep(.el-input:focus .el-input__wrapper){
  box-shadow: 2px 2px 4px #a0aef169;
  border: 1px solid red;
} */
</style>
